import * as THREE from 'three'
import { gui } from '../gui'
import { stats } from '../stats'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

function createCourse18 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const logoShape = new THREE.Shape()
  logoShape.moveTo(0, 0)
  logoShape.lineTo(34, 0)
  logoShape.lineTo(30, 38)
  logoShape.lineTo(-5, 47)
  logoShape.lineTo(-23, 13)
  logoShape.lineTo(-6, -25)
  logoShape.lineTo(-5, 21)
  logoShape.lineTo(10, 28)
  logoShape.lineTo(25, 10)
  logoShape.lineTo(0, 0)
  //   const logoGeo = new THREE.ShapeGeometry(logoShape)
  //   const logoMat = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide })
  //   const logo2D = new THREE.Mesh(logoGeo, logoMat)
  // scene.add(logo2D);

  const extrudeSetting = {
    steps: 1,
    depth: 1,
    bevelEnabled: true,
    bevelThickness: 5,
    bevelSize: -0.1,
    bevelOffset: 0,
    bevelSegments: 3,
    wireframe: false
  }

  let extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
  const extrudeMat = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide })
  let logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
  scene.add(logo3D)

  const ctrl = gui
  const logo3DFolder = ctrl.addFolder('logo3D')
  logo3DFolder.add(extrudeSetting, 'wireframe').onChange(function () {
    scene.remove(logo3D)
    extrudeMat.wireframe = extrudeSetting.wireframe
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'steps', 0, 5).onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'depth', 0, 20).onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'bevelEnabled').onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'bevelThickness', 0, 20).onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'bevelSize', -5, 5).onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'bevelOffset', 0, 5).onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })
  logo3DFolder.add(extrudeSetting, 'bevelSegments', 0, 50).onChange(function () {
    scene.remove(logo3D)
    extrudeGeo = new THREE.ExtrudeGeometry(logoShape, extrudeSetting)
    logo3D = new THREE.Mesh(extrudeGeo, extrudeMat)
    scene.add(logo3D)
  })

  camera.position.x = 0
  camera.position.y = 0
  camera.position.z = 50
  camera.lookAt(scene.position)
  scene.add(camera)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse18
}
